<template>
    <div>
        <div class="header-bar">
            <span class="icon icon-back"></span>
            <h3>购物车</h3>
        </div>

        <div class="content">
            <div class="shop-list">
                <v-touch :options="{ touchAction: 'pan-y' }"  
                :class="['item', isEdit?'is-del':'']" 
                v-for="(item, index) in shopListArr" 
                :ref="'shopList'+index" :key="index" 
                @panright="swipeRightFn(index)"
                @panleft="swipeLeftFn(index)">
                    <div class="store">
                        <span class="icon icon-store"></span>
                        <h4>{{item.store}}</h4>
                    </div>
                    <div class="pro-detail">
                        <label class="check-wrap">
                            <input type="checkbox" @click="item.ischecked=!item.ischecked" :checked="item.ischecked" class="checkbox">
                            <i></i>
                        </label>
                        <div class="pic">
                            <img :src="item.imgSrc" alt="product-pic">
                        </div>
                        <div class="desc">
                            <div class="title">
                                {{item.title | titleFilter}}
                                <span>{{item.size}}</span>
                            </div>
                            <div class="num-wrap">
                                <span class="icon icon-reduce" @click="item.num>1?item.num--:item.num">-</span>
                                <input type="number" :value="item.num" >
                                <span class="icon icon-add" @click="item.num++">+</span>
                            </div>
                        </div>
                        <div class="price">￥{{item.price}}</div>
                        <div class="del-item">删除</div>
                    </div>
                </v-touch>
            </div>
            <div class="empty">
                <img src="../img/icon-shop.png" alt="">
                <h3>购物车还是空的快去逛逛吧~</h3>
            </div>
        </div>

        <div class="pay-bar">
            <label class="check-all">
                <input type="checkbox" :checked="isCheckAll" @click="setCheckAll()">
                <i></i>
                全选
            </label>
            <label class="check-edit">
                <input type="checkbox" :checked="isEdit" @click="isEdit = !isEdit">
                <i></i>
                编辑
            </label>
            <div class="total">
                <div class="total-price">合计：{{getTotalPrice}}</div>
                <span>（不含运费）</span>
            </div>
            <div class="pay">去结算</div>
        </div>

        <MenuBar></MenuBar>
    </div>
</template>

<script>
// import MenuBar from "../components/menuBar";
import ShopCartDatas from "../datas/shopCartDatas.js";
export default {
  name: "ShopCartPage",
  components: {
    // MenuBar
  },
  data() {
    return {
      shopListArr: [],
      isEdit: false
    };
  },
  computed: {
    isCheckAll() {
      let isAll = true;
      this.shopListArr.forEach(item => {
        if (!item.ischecked) {
          isAll = false;
        }
      });
      return isAll;
    },
    getTotalPrice() {
      let total = 0;
      this.shopListArr.map(item => {
        if (item.ischecked) {
          total += item.price * item.num;
        }
      });
      return total.toFixed(2);
    }
  },
  methods: {
    swipeLeftFn(index) {
      let key = "shopList" + index;
      this.$refs[key][0].$el.className = "item is-del";
    },
    swipeRightFn(index) {
      let key = "shopList" + index;
      this.$refs[key][0].$el.className = "item";
    },
    getShopCartDatas() {
      setTimeout(() => {
        this.shopListArr = ShopCartDatas;
      }, 300);
    },
    setCheckAll() {
      if (this.isCheckAll) {
        this.shopListArr.map(item => {
          item.ischecked = false;
        });
      } else {
        this.shopListArr.map(item => {
          item.ischecked = true;
        });
      }
      //   this.shopListArr.map(item => {
      //     item.ischecked = !this.isCheckAll;
      //   });
    },
    // resetNum(e) {
    //   // e = e || window.event;
    //   // let target = e.target || e.srcElement;
    //   // console.log(target.value);
    // }
  },
  created() {
    this.getShopCartDatas();
  },
  filters: {
    titleFilter(val) {
      if (val.length > 17) {
        return val.substr(0, 17) + "...";
      }
      return val;
    }
  }
};
</script>

<style scoped lang="less">
@import "../style/shopCart.less";
.test {
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 20px;
}
</style>